<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=<?php echo $this->getGoogleApiKey(); ?>&sensor=false&libraries=geometry,places"></script>
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0" type="text/javascript"></script>
<?php
/**
 * Magestore
 * 
 * NOTICE OF LICENSE
 * 
 * This source file is subject to the Magestore.com license that is
 * available through the world-wide-web at this URL:
 * http://www.magestore.com/license-agreement.html
 * 
 * DISCLAIMER
 * 
 * Do not edit or add to this file if you wish to upgrade this extension to newer
 * version in the future.
 * 
 * @category 	Magestore
 * @package 	Magestore_Storelocator
 * @copyright 	Copyright (c) 2012 Magestore (http://www.magestore.com/)
 * @license 	http://www.magestore.com/license-agreement.html
 */
/**
 * storelocator template
 * 
 * @see Magestore_Storelocator_Block_Storelocator
 */
header_remove("Expires");
header_remove("Cache-Control");
header_remove("Pragma");
header_remove("Last-Modified");
$coordinates = $this->getCoordinatesCurrent();
$levleRadiusConvert = $this->getLeveRadiusConvert();
$levelRadius = $this->getLevelRadius();
$lscollection = $this->getListStore();
$countries = $this->getListCountry();
$search_config = $this->getSearchConfig();
$unit = $this->getUnitRadius();
$taglist = $this->getTagList();
$sortDefault = $this->getSortDefaultContry();
$deaultRadius = $this->chekRadiusDefault(); 

?>
<div class="page-title">
    <h1><?php echo $this->getPageTitle(); ?></h1>
</div>
<div id="store_search">
<form method="Post" action="<?php echo (Mage ::getBaseUrl() . "storelocator/index/index"); ?>" name="store_search" >
    <div class="fieldset">
        
            <h2 class="legend"><?php echo $this->__('Search by Distance') ?></h2>
        <ul class="form-list">
            <li class="fields store-locator-list">                                               
                <label for="address"><?php echo $this->__('Your location') ?></label>
                <input  autocomplete="off" onkeyup="disiableRadius(this.value)" onblur="disiableRadius(this.value)" id ="address" class="input-text" name="address" type="text" value="<?php echo $this->getRequest()->getParam('address') ?>" />
                <div style="clear:both;"></div>
                <div id="countryh"></div>
            </li>
            
              <li class="fields store-locator-list">                                         
                <label for="radius"><?php echo $this->__('Radius') ?></label>
                <input disabled="disabled" value="<?php echo $this->getRequest()->getParam('radius') ?>" name="radius" id="radius" class="input-text validate-input required-entry" /><?php echo $unit; ?>
                <div style="clear:both;"></div>
            </li>
              
        </ul>
      
    </div>
    <?php if (($search_config != NULL) && (count($search_config)) && (!in_array(5, $search_config))): ?>
         <div class="fieldset">
        
            <h2 class="legend"><?php echo $this->__('Search by Area') ?></h2>
        <ul class="form-list" >
            
                <?php foreach ($search_config as $item): ?>                
                    <?php if ($item == 0): ?>                                                                                    
                    <?php elseif ($item == 1): ?>                   
                        <li class="fields store-locator-list" >                            
                            <label for="country"><?php echo $this->__('Country') ?></label>
                            <select name="country" id="country" class="validate-select" style="width:305px;"> 
                                <option value="nothing" selected><?php echo $this->__('Select Country') ?></option>
                                <?php if (count($countries)): ?>
                                    <?php foreach ($countries as $country): ?>
                                        <?php
                                        if ($this->getRequest()->getParam('country')) {
                                            $selected = '';
                                            if ($country['value'] == $this->getRequest()->getParam('country')) {
                                                $selected = 'selected';
                                            }
                                        } else {
                                            $selected = '';
                                            if ($country['value'] == $this->getDefaultCountry()) {
                                                $selected = 'selected';
                                            }
                                        }
                                        ?>
                                        <option value="<?php echo $country['value'] ?>" <?php echo $selected; ?>><?php echo $country['label'] ?></option>
                                    <?php endforeach; ?>
                                <?php endif; ?>

                            </select>
                            <div style="clear:both;"></div>
                        </li>                                
                    <?php elseif ($item == 2): ?>                               
                        <li class="fields store-locator-list">                                        
                            <label for="state"><?php echo $this->__('State/Province') ?></label>
                            <input id="state_province" class="input-text" name="state" type="text" value="<?php echo $this->getRequest()->getParam('state') ?>"/>
                            <div style="clear:both;"></div>
                        </li>                                
                    <?php elseif ($item == 3): ?>                               
                        <li class="fields store-locator-list">                                        
                            <label for="city"><?php echo $this->__('City') ?></label>
                            <input id="city" name="city" class="input-text" type="text" value="<?php echo $this->getRequest()->getParam('city') ?>"/>
                            <div style="clear:both;"></div>
                        </li>                                
                    <?php elseif ($item == 4) : ?>                               
                        <li class="fields store-locator-list">                                         
                            <label for="zipcode"><?php echo $this->__('Zip Code') ?></label>
                            <input class="input-text" id="zipcode" name="zipcode" type="text" value="<?php echo $this->getRequest()->getParam('zipcode') ?>"/>
                            <div style="clear:both;"></div>
                        </li>

                    <?php endif; ?>
                <?php endforeach; ?>
                                                           
        </ul>

         </div>
        <?php endif; ?>          
        <div class="clear"></div>
        <div style="float:right;margin-bottom:15px">
            
             <button type="button" class="button" title="reset" onclick="setLocation('<?php echo $this->getUrl('storelocator/index/index') ?>');"><span><span><?php echo $this->__('Reset') ?></span></span></button>
                    <button type="submit" class="button" title="search"><span><span><?php echo $this->__('Search') ?></span></span></button>
        </div>
        </form>  
    </div>


<!--LIST STORE & MAP-->
<div class="store-locator-content" id="store-locator-content">
<?php //if ($coordinates && count($lscollection)) { ?> 
<?php if (count($lscollection)) { ?>    
       
        <div class="store-locator-list-store-box">
            <div class="store-locator-list-store-title"><?php echo $this->__('Store List'); ?></div>
            <div class="store-locator-list-store" id="store-locator-list-store">            
            </div>
        </div>   
   
        <!--MAP-->
        <div class="store-locator-map" id="map"></div>
        <div class="clear"></div>        
        <script type="text/javascript">
            //<![CDATA[       
            var arrayHtml = [];
            var arrayInfo = [];
            var storeloactor = new StorelocatorFrontEnd(-34.397, 150.644, 8, 'map');
            var infoWindow = new google.maps.InfoWindow();
            var htmlInput = '';
    <?php if ($coordinates): ?>
                latitude = <?php echo $coordinates['lat'] ?>;
                longitude = <?php echo $coordinates['lng'] ?>;
                htmlInput += '<input id="storelocator-lat-100000000000" type="hidden" value="hfghdr66666"/>'
                        + '<input id="storelocator-lng-100000000000" type="hidden" value="3436hhj"/>';
                var pointFind = new google.maps.LatLng(latitude, longitude);
               
    <?php endif; ?>
            //]]>
        </script>      

    <?php  foreach ($lscollection as $store) { ?>   
            <script type="text/javascript">
                //<![CDATA[       
                var setLat = <?php echo $store->getLatitude() ?>;
                var setLon = <?php echo $store->getLongtitude() ?>;
                var storeId = <?php echo $store->getStorelocatorId(); ?>;
                storeloactor.markearryIdStore.push(storeId);
        <?php if ($store->getImageIcon()) { ?>
                    var image = '<?php echo $this->getImageIconByStore($store->getId(), $store->getImageIcon()); ?>';
        <?php } else { ?>
                    var image = null;
        <?php } ?>
                var zoomLevel = <?php echo $store->getZoomLevel(); ?>;
                var store_info = '<div style="width: 200px"><?php echo $store->getData('address') . ", " . $store->getData('city') . ", " . $store->getState(); ?><br/></div>' +
                        '<div>' + '<?php echo $store->getCountryName() . "&nbsp; &nbsp;" . $store->getZipcode(); ?>' + '<br/></div>' +
                        '<div><?php echo $store->getPhone(); ?><br/></div>' + '<div>' +
                        '<a href="<?php echo Mage::getBaseUrl() . "storelocator/index/view/id/" . $store->getStorelocatorId(); ?>" style="float:left"><?php echo $this->__('View Details')?></a>' +
                        '<a href="<?php echo $store->getLink(); ?>" style="float:right" target="_blank"><i><?php echo $this->CutLink($store->getLink()); ?></i></a>'
                        + '<p style="overflow:hidden;width:240px;clear:both"><input size="30" onclick="setautocomplete(this)" id="customerAddressMap<?php echo $store->getStorelocatorId(); ?>" type="text" value="" style="padding:2px 3px;float:left;margin-right:6px;"/>'

                        + '<input onclick="getDirections(<?php echo $store->getStorelocatorId(); ?>); return false;" type="image" style="float:left;" src="<?php echo $this->getSkinUrl(); ?>/images/gobutton.gif" /></p>' +
                        '</div>';

                marker_point = new google.maps.LatLng(setLat, setLon);
                storeloactor.extendPoint(marker_point);

                //info
                infoPop = new InfoPopup(storeId, store_info, zoomLevel, marker_point);
                arrayInfo.push(infoPop);
                
                html = '<div id="<?php echo 'id' . $store->getStorelocatorId(); ?>" class="store-locator-list-store-item"'
                        + 'onclick="javascript:setActive(<?php echo $store->getStorelocatorId() ?>);">'
                        + '<input id="storelocator-lat-<?php echo $store->getStorelocatorId() ?>" type="hidden" value="<?php echo $store->getLatitude() ?>"/>'
                        + '<input id="storelocator-lng-<?php echo $store->getStorelocatorId() ?>" type="hidden" value="<?php echo $store->getLongtitude() ?>"/>'
                        + '<div class="store-locator-item-content">'
                        + '<div class="store-locator-item-name"><?php echo $store->getName() ?><br/></div>'
                        + '<div><?php echo $store->getData('address') . ", " . $store->getData('city') . ", " . $store->getState(); ?><br/></div>'
                        + '<div><?php echo $store->getCountryName() . "&nbsp; &nbsp;" . $store->getZipcode(); ?><br/></div>'
                        + '<div><?php echo $store->getPhone(); ?><br/></div>'
                        + '<div>'
                        + ' <a href="<?php echo Mage::getBaseUrl() . "storelocator/index/view/id/" . $store->getStorelocatorId(); ?>" style="float:left"><?php echo $this->__('View Details')?></a>'
                        + '<a href="<?php echo $store->getLink(); ?>" style="float:right" target="_blank"><i><?php echo $this->CutLink($store->getLink()); ?></i></a>'
                        + '<p style="overflow:hidden;width:240px;clear:both"><input size="30" id="customerAddress<?php echo $store->getStorelocatorId(); ?>" type="text" value="" style="padding:2px 3px;float:left;margin-right:6px;"/>'

                        + '<input onclick="getDirections(<?php echo $store->getStorelocatorId(); ?>); return false;" type="image" style="float:left;" src="<?php echo $this->getSkinUrl(); ?>/images/gobutton.gif" /></p>'
                        + '</div>'
                        + '</div>'
        <?php $urlImageBig = Mage::helper('storelocator')->getBigImagebyStore($store->getStorelocatorId()); ?>
        <?php if ($urlImageBig): ?>
                    + '<div class="store-locator-item-image"><img src="<?php echo $urlImageBig ?>" width="70" height="85"/> </div>'
        <?php endif; ?>
                + '<div class="clear"></div>'
                        + '</div> '
                        + '<div class="magestore-storelocator-getdirection" id="magestore-storelocator-getdirection-<?php echo $store->getStorelocatorId(); ?>" style="display: none;">'
                        + '<div onclick ="javascript:showDirections(<?php echo $store->getStorelocatorId() ?>)" class="magestore-storelocator-navigation" id="<?php echo 'store-locator-navigation' . $store->getStorelocatorId(); ?>"><span class="store-locator-navigation_image"></span><font size="-1" color="#ccc">Click here to show direction</font></div>'
                        + '<div onclick ="javascript:hideDirections(<?php echo $store->getStorelocatorId() ?>)" class="magestore-storelocator-navigation-up" id="<?php echo 'store-locator-navigation-up' . $store->getStorelocatorId(); ?>" style="display:none"></div>'
                        + '<div class="magestore-storelocator-directionsPanel" id="magestore-storelocator-directionsPanel-<?php echo $store->getStorelocatorId() ?>" style="display: none;"></div>'
                        + '</div>'
                        + '<div class="clear"></div>';

        <?php if ($coordinates): ?>
                    storeObject = new StorelocatorObject(html, google.maps.geometry.spherical.computeDistanceBetween(pointFind, marker_point), storeId, null);
                    storeloactor.placeMarker(marker_point, store_info, storeId, image, zoomLevel, infoWindow, 1, storeObject);
        <?php else: ?>
                    storeObject = new StorelocatorObject(html, 0, storeId, null);
                    storeloactor.placeMarker(marker_point, store_info, storeId, image, zoomLevel, infoWindow, 0, storeObject);
        <?php endif; ?>
                arrayHtml.push(storeObject);
                //]]>
            </script>                
    <?php } ?>
        <script type="text/javascript">
            //<![CDATA[          
            var renderHtml = '';

            function fillterByTag(storeids, x, tagid) {
                setTagActiveForm(tagid);
                checkShow = x;
                renderhtmlToTag = '';
                if (checkShow) {
                    id_array = storeids.split(",").map(Number);
                    for (j = 0; j < arrayHtml.length; j++) {
                        for (k = 0; k < id_array.length; k++) {
                            if (arrayHtml[j].storeId == id_array[k]) {
                                arrayHtml[j].marker.setMap(storeloactor.map);
                                renderhtmlToTag += arrayHtml[j].html;
                                break;
                            } else {
                                arrayHtml[j].marker.setMap(null);
                            }
                        }

                    }
                } else {
                    for (i = 0; i < arrayHtml.length; i++) {
                        renderhtmlToTag += arrayHtml[i].html;
                        arrayHtml[i].marker.setMap(storeloactor.map);
                    }
                }
                infoWindow.close();
                storeloactor.directionsDisplay.setMap(null);
                ;
                storeloactor.setBoundFill();
                document.getElementById("store-locator-list-store").innerHTML = htmlInput + renderhtmlToTag;
            }
    <?php if ($sortDefault == 'distance'): ?>
                arrayHtml.sort(function(a, b) {
                    return a.distance - b.distance
                });
    <?php endif; ?>
            for (i = 0; i < arrayHtml.length; i++) {
                renderHtml += arrayHtml[i].html;
            }           
            document.getElementById("store-locator-list-store").innerHTML = htmlInput + renderHtml;
            //]]>
        </script> 
        <script type="text/javascript">
            //<![CDATA[    
            function showDirections(id) {
                $('store-locator-navigation-up' + id).style.display = 'block';
                $('magestore-storelocator-directionsPanel-' + id).style.display = 'block';
              //  $('store-locator-navigation' + id).style.display = 'none';

            }
            function hideDirections(id) {
               
                $('magestore-storelocator-directionsPanel-' + id).style.display = 'none';
                $('store-locator-navigation-up' + id).style.display = 'none';
                $('store-locator-navigation' + id).style.display = 'block';
            }
    <?php if ($coordinates): ?>
                storeloactor.createMarker(pointFind);
                function setActive(id) {
                    var storeloactor = new StorelocatorFrontEnd(-34.397, 150.644, 8, 'map');
        <?php foreach ($lscollection as $store) { ?>
                        var setLat = <?php echo $store->getLatitude() ?>;
                        var setLon = <?php echo $store->getLongtitude() ?>;
                        var storeId = <?php echo $store->getStorelocatorId(); ?>;
                        storeloactor.markearryIdStore.push(storeId);
            <?php if ($store->getImageIcon()) { ?>
                            var image = '<?php echo $this->getImageIconByStore($store->getId(), $store->getImageIcon()); ?>';
            <?php } else { ?>
                            var image = null;
            <?php } ?>
                        var zoomLevel = <?php echo $store->getZoomLevel(); ?>;
                        var store_info = '<div style="width: 200px"><?php echo $store->getData('address') . ", " . $store->getData('city') . ", " . $store->getState(); ?><br/></div>' +
                                '<div>' + '<?php echo $store->getCountryName() . "&nbsp; &nbsp;" . $store->getZipcode(); ?>' + '<br/></div>' +
                                '<div><?php echo $store->getPhone(); ?><br/></div>' + '<div>' +
                                '<a href="<?php echo Mage::getBaseUrl() . "storelocator/index/view/id/" . $store->getStorelocatorId(); ?>" style="float:left"><?php echo $this->__('View Details')?></a>' +
                                '<a href="<?php echo $store->getLink(); ?>" style="float:right" target="_blank"><i><?php echo $this->CutLink($store->getLink()); ?></i></a>'
                                + '<p style="overflow:hidden;width:240px;clear:both"><input size="30" onclick="setautocomplete(this)" id="customerAddressMap<?php echo $store->getStorelocatorId(); ?>" type="text" value="" style="padding:2px 3px;float:left;margin-right:6px;"/>'

                                + '<input onclick="getDirections(<?php echo $store->getStorelocatorId(); ?>); return false;" type="image" style="float:left;" src="<?php echo $this->getSkinUrl(); ?>/images/gobutton.gif" /></p>' +
                                '</div>';

                        marker_point = new google.maps.LatLng(setLat, setLon);
                        storeloactor.extendPoint(marker_point);
            <?php if ($coordinates): ?>
                            storeObject = new StorelocatorObject(html, google.maps.geometry.spherical.computeDistanceBetween(pointFind, marker_point), storeId, null)
                            storeloactor.placeMarker(marker_point, store_info, storeId, image, zoomLevel, infoWindow, 1, storeObject);
            <?php else: ?>
                            storeObject = new StorelocatorObject(html, 0, storeId, null)
                            storeloactor.placeMarker(marker_point, store_info, storeId, image, zoomLevel, infoWindow, 0, storeObject);
            <?php endif; ?>
        <?php } ?>
                    storeloactor.setActiveForm(id, 1);
                    for (i = 0; i < arrayInfo.length; i++) {
                        if (arrayInfo[i].storeId == id) {
                            storeloactor.directionsDisplay.setMap(storeloactor.map);
                            infoWindow.setContent(arrayInfo[i].html);
                            infoWindow.setPosition(arrayInfo[i].point);
                            storeloactor.map.setCenter(arrayInfo[i].point);
                            infoWindow.open(storeloactor.map);
                            if (arrayInfo[i].zoom != 0) {
                                storeloactor.map.setZoom(arrayInfo[i].zoom);
                            }
                            break;
                        }
                    }
                }
    <?php else: ?>
                function setActive(id) {
                    var storeloactor = new StorelocatorFrontEnd(-34.397, 150.644, 8, 'map');
        <?php foreach ($lscollection as $store) { ?>
                        var setLat = <?php echo $store->getLatitude() ?>;
                        var setLon = <?php echo $store->getLongtitude() ?>;
                        var storeId = <?php echo $store->getStorelocatorId(); ?>;
                        storeloactor.markearryIdStore.push(storeId);
            <?php if ($store->getImageIcon()) { ?>
                            var image = '<?php echo $this->getImageIconByStore($store->getId(), $store->getImageIcon()); ?>';
            <?php } else { ?>
                            var image = null;
            <?php } ?>
                        var zoomLevel = <?php echo $store->getZoomLevel(); ?>;
                        var store_info = '<div style="width: 200px"><?php echo $store->getData('address') . ", " . $store->getData('city') . ", " . $store->getState(); ?><br/></div>' +
                                '<div>' + '<?php echo $store->getCountryName() . "&nbsp; &nbsp;" . $store->getZipcode(); ?>' + '<br/></div>' +
                                '<div><?php echo $store->getPhone(); ?><br/></div>' + '<div>' +
                                '<a href="<?php echo Mage::getBaseUrl() . "storelocator/index/view/id/" . $store->getStorelocatorId(); ?>" style="float:left"><?php echo $this->__('View Details')?></a>' +
                                '<a href="<?php echo $store->getLink(); ?>" style="float:right" target="_blank"><i><?php echo $this->CutLink($store->getLink()); ?></i></a>'
                                + '<p style="overflow:hidden;width:240px;clear:both"><input size="30" onclick="setautocomplete(this)" id="customerAddressMap<?php echo $store->getStorelocatorId(); ?>" type="text" value="" style="padding:2px 3px;float:left;margin-right:6px;"/>'

                                + '<input onclick="getDirections(<?php echo $store->getStorelocatorId(); ?>); return false;" type="image" style="float:left;" src="<?php echo $this->getSkinUrl(); ?>/images/gobutton.gif" /></p>' +
                                '</div>';

                        marker_point = new google.maps.LatLng(setLat, setLon);
                        storeloactor.extendPoint(marker_point);
            <?php if ($coordinates): ?>
                            storeObject = new StorelocatorObject(html, google.maps.geometry.spherical.computeDistanceBetween(pointFind, marker_point), storeId, null)
                            storeloactor.placeMarker(marker_point, store_info, storeId, image, zoomLevel, infoWindow, 1, storeObject);
            <?php else: ?>
                            storeObject = new StorelocatorObject(html, 0, storeId, null)
                            storeloactor.placeMarker(marker_point, store_info, storeId, image, zoomLevel, infoWindow, 0, storeObject);
            <?php endif; ?>
        <?php } ?>
                    storeloactor.setActiveForm(id, 0);
                    for (i = 0; i < arrayInfo.length; i++) {
                        if (arrayInfo[i].storeId == id) {
                            storeloactor.directionsDisplay.setMap(storeloactor.map);
                            infoWindow.setContent(arrayInfo[i].html);
                            infoWindow.setPosition(arrayInfo[i].point);
                            storeloactor.map.setCenter(arrayInfo[i].point);
                            infoWindow.open(storeloactor.map);
                            if (arrayInfo[i].zoom != 0) {
                                storeloactor.map.setZoom(arrayInfo[i].zoom);
                            }
                            break;
                        }
                    }
                }
    <?php endif; ?>
            storeloactor.setBoundFill();
    <?php if ($coordinates && $levleRadiusConvert): ?>
                storeloactor.createRadius(<?php echo $levleRadiusConvert; ?>);
                //storeloactor.calcRoute(10, 2);
    <?php endif; ?>
            //]]>
        </script> 

    <?php if (count($taglist)): ?>
            <div class="store-locator-tag">
                <span class="store-locator-span-tag"><?php echo $this->__('Filter by Tags') ?></span>
                <ul>
                    <li style="float: left; margin-right: 10px">
                        <a id="storelocator_tag_0" href="javascript:void(0)" class="tag_active" onclick="javascript:fillterByTag('all', 0, 0)"><?php echo $this->__('Show All'); ?></a>
                    </li>
                    <?php $tagnumber = 1; ?>  
        <?php foreach ($taglist as $tag): ?> 
                        <li style="float: left; margin-right: 10px">
                            <a id="<?php echo 'storelocator_tag_' . $tagnumber; ?>" href="javascript:void(0)" onclick="javascript:fillterByTag('<?php echo $tag['ids']; ?>', 1,<?php echo $tagnumber;
                   $tagnumber++
                   ?>)"><?php echo $tag['value']; ?></a>
                        </li>
        <?php endforeach; ?>						
                </ul>                    
                <div class="clear"></div>
            </div>        
        <?php endif; ?>
        <?php
    } else {
        echo $this->__('Store Not Found!');
    }
    ?>

    <script type="text/javascript">
        function setTagActiveForm(id) {
            $$('.store-locator-tag a').invoke('removeClassName', 'tag_active');
            $('storelocator_tag_' + id).addClassName('tag_active');
        }

        window.onload = function() {
               if(!document.getElementById("country")){
                 var valueCountry = '<?php echo  $this->getRequest()->getParam('country') ?>';
                 document.getElementById("countryh").innerHTML='<input type="hidden" name="country" id="country" value="'+valueCountry+'"/>';
            }
            var  autocompleteBilling = new google.maps.places.Autocomplete(document.getElementById('address'), {types: ['geocode']});
            google.maps.event.addListener(autocompleteBilling, 'place_changed', function() {
                 var place = autocompleteBilling.getPlace();
                 
                for (var i = 0; i < place.address_components.length; i++) {
                    if(place.address_components[i].types[0] == 'country'){
                        document.getElementById("country").value=place.address_components[i]['short_name'];
                    }
                }
                 
            });
<?php foreach ($lscollection as $store) : ?>
                new google.maps.places.Autocomplete((document.getElementById('customerAddress<?php echo $store->getStorelocatorId() ?>')));
<?php endforeach; ?>
        };
        function getDirections(storeId)
        {

            $('magestore-storelocator-getdirection-' + storeId).style.display = 'block'
            var start = new Array();
            var end = new Array();
            end[0] = document.getElementById("storelocator-lat-" + storeId).value;
            end[1] = document.getElementById("storelocator-lng-" + storeId).value;
            var geocoder = new google.maps.Geocoder();
            var address = document.getElementById("customerAddress" + storeId).value;
            if (!address) {
                var address = document.getElementById("customerAddressMap" + storeId).value;
            }
            geocoder.geocode({'address': address}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK)
                {
                    endvalue = results[0].geometry.location;
                    start[0] = endvalue.k;
                    start[1] = endvalue.A;
                    calcRoute(start, end, storeId);
                }
            });
        }



        function calcRoute(start, end, storeId) {
            var directionsService = new google.maps.DirectionsService();
            var directionsDisplay = new google.maps.DirectionsRenderer();
            document.getElementById('store-locator-navigation' + storeId).innerHTML = '';
            directionsDisplay.setPanel(document.getElementById('store-locator-navigation' + storeId));
            var map = new google.maps.Map(document.getElementById('map'));
            directionsDisplay.setMap(map);
            var request = {
                origin: new google.maps.LatLng(parseFloat(start[0]), parseFloat(start[1])),
                destination: new google.maps.LatLng(parseFloat(end[0]), parseFloat(end[1])),
                travelMode: google.maps.TravelMode.DRIVING
            };
            directionsService.route(request, function(response, status) {             
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                }
            });
        }
        function setautocomplete(element) {
            var inputB = (element);
            var autocompleteB = new google.maps.places.Autocomplete(inputB);
        }
       
        var addressValue =  document.getElementById("address").value;
        disiableRadius(addressValue);
       
        function disiableRadius(text) {
            if(text.length){
                document.getElementById("radius").disabled  = false;
                <?php if(!isset($_POST['radius'])): ?>
                    document.getElementById("radius").value  = '<?php echo $deaultRadius; ?>';
                 <?php endif; ?>
            }else{
                document.getElementById("radius").value  = '';
                document.getElementById("radius").disabled  = true;
            }
        }
    </script>
</div>
<div class="clear"></div>
<style>
    
    #radius:disabled { background: #cdcdcd; }
</style>
